<template>
  <div class="container">
    <div class="container__content">
      <mailListSearch />

      <mail-list-banner :iconItems="mailListOfficeIcon" />
      <div class="container__content__message">
        <div class="container__content__message__title">工作室消息</div>
        <div class="container__content__message__msgPanel">
          <div class="container__content__message__msgPanel__header">
            <div
              :class="{
                container__content__message__msgPanel__header__items: true,
                active: item.path === route.path,
              }"
              v-for="(item, index) of officeNavList"
              :key="index"
              @click="
                () => {
                  router.push(item.path);
                }
              "
            >
              {{ item.text }}
            </div>
          </div>
          <!-- <Message /> -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import mailListBanner from "../mailListBanner.vue";
import mailListSearch from "../search/search.vue";

const router = useRouter();
const route = useRoute();
const mailListOfficeIcon = [
  {
    icon: "&#xe63d;",
    text: "推荐同事",
  },
  {
    icon: "&#xe65c;",
    text: "工作室成员",
  },
  {
    icon: "&#xe634;",
    text: "权限管理",
  },
  {
    icon: "&#xe633;",
    text: "群聊管理",
  },
  {
    icon: "&#xe626;",
    text: "转诊病历",
  },
  {
    icon: "&#xe60f;",
    text: "同院同事",
  },
  {
    icon: "&#xe623;",
    text: "讨论池",
  },
  {
    icon: "&#xe6ba;",
    text: "院内新闻",
  },
];
const officeNavList = ref([
  {
    text: "消息",
    path: "/mailList/office/message",
  },
  {
    text: "工作室",
    path: "/mailList/office/officeHome",
  },
  {
    text: "群聊",
    path: "/mailList/office/groupChat",
  },
]);
</script>
<style lang="scss" scoped>
.container {
  &__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    &__search {
      width: 404rem;
      height: 44rem;
      display: flex;
      background-color: #fff;
      align-items: center;
      padding-left: 20rem;
      margin: 20rem 10rem 20rem 10rem;
      border-radius: 5rem;
      & span.iconfont {
        font-size: 27rem;
        color: #ccc;
      }
      &__input {
        width: 100%;
        height: 70%;
        padding-left: 10rem;
      }
    }

    &__message {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      &__title {
        width: 414rem;
        font-size: 14rem;
        margin: 10rem 0;
      }
      &__msgPanel {
        width: 414rem;
        background-color: #fff;
        &__header {
          display: flex;
          justify-content: start;
          padding: 10rem;
          &__items {
            width: 60rem;
            height: 30rem;
            text-align: center;
            line-height: 32rem;
            font-size: 13rem;
            margin: 0 5rem;
          }
          & .active {
            background-color: #6481da;
            border-radius: 5rem;
            color: #fff;
            font-weight: bold;
            font-size: 14rem;
          }
        }
      }
    }
  }
}
</style>
